<template>
  <view class="foolRecord">
    <view class="text">
      <text>精选食谱</text>
    </view>
    <view class="tabs">
      <u-tabs :list="tabsList" :current="current" @change="change" :show-bar="false" font-size="26" duration="0"
        height="70" active-color="#B5F0EF" :active-item-style="barStyle"></u-tabs>
    </view>
    <view class="foolItem" v-for="(item,index) in menuList" :key="item._id">
      <view class="imgItem" @click="goto('/pages/fool-detail/fool-detail?id='+item._id)">
        <image :src="item.menuImage.path" style="width: 100%;" mode="widthFix"></image>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabsList_real: [],
        menuList: [],
        current: 0,
        barStyle: {
          backgroundColor: '#00BDC6',
          marginRight: '10rpx',
          borderTopLeftRadius: '50rpx',
          borderTopRightRadius: '50rpx',
          borderBottomLeftRadius: '50rpx',
          borderBottomRightRadius: '50rpx'
        }
      };
    },
    computed: {
      tabsList() {
        return this.tabsList_real.map(item => {
          return {
            name: item.name
          }
        })
      }
    },
    async onLoad() {
      let res = await uniCloud.callFunction({
        name: "diet",
        data: {
          flag: 'categories'
        }
      })
      this.tabsList_real = res.result.data
      console.log(this.tabsList_real);
      this.getMenuList()
    },
    methods: {
      //获取菜谱分类
      // async getTabsList() {

      // },
      change(index) {
        this.current = index;
        this.getMenuList()
      },
      getMenuList() {
        uniCloud.callFunction({
          name: "diet",
          data: {
            flag: 0,
            category_id: this.tabsList_real[this.current]._id
          }
        }).then(res => {
          console.log(res);
          this.menuList = res.result.data
        })
      },
      goto(url) {
        uni.navigateTo({
          url
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .foolRecord {
    padding: 40rpx;

    .text {
      font-weight: 700;
      font-size: 30rpx;
      margin-bottom: 20rpx;
    }


    .foolItem {
      padding: 20rpx 0;

      image {
        border-radius: 30rpx;
      }
    }
  }
</style>